<template>
  <view :style="{paddingBottom}">
    <login-container :back="false" title="账号密码登录" button-text="登录" show-quit @submit="bindLogin">
      <view class="margin-top-40">
        <view v-for="(val,key) in formList" :key="key" class="input-box margin-bottom-56">
          <input
            v-model="form[val.attr]"
            class="text-32 color-t1"
            placeholder-class="color-t3"
            :ignoreCompositionEvent="false"
            :type="val.type"
            :placeholder="val.placeholder"
            :maxlength="val.maxLength"
            :password="val.password"
          >
        </view>
      </view>
    </login-container>
    <view class="align-item flex-row justify-between padding-lr-56">
      <text class="text-28 color-primary" @click="jump('/passport/phone-login/phone-login','redirectTo')">验证码登录</text>
	  <text class="text-28 color-primary" @click="jump('/passport/login/login','redirectTo')">快捷登录</text>
      <view>
        <text class="text-28 color-primary" @click="jump('/passport/register/register','redirectTo')">立即注册</text>
        <text class="text-28 margin-lr-30" style="color:#707070">|</text>
        <text class="text-28 color-t3" @click="jump('/passport/forget-password/forget-password','redirectTo')">忘记密码</text>
      </view>
    </view>

    <log-out-dialog :show.sync="showLogOutDialog" :phone="dialogPhone" @confirm="bindLogin" />

    <!--  #ifdef APP-PLUS  -->
    <third-party @showLogOut="showLogOut" @mounted="paddingBottom = $event + 20 + 'px'" />
    <!--  #endif  -->
  </view>
</template>

<script>
import LoginContainer from '../components/login-container/login-container'
import ThirdParty from '../components/third-party/third-party'
import logOutDialog from '../components/log-out-dialog/log-out-dialog'
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { encryption } from '../index'
export default {
  name: 'PasswordLogin',
  components: {
    LoginContainer,
    ThirdParty,
    logOutDialog
  },
  data() {
    return {
      paddingBottom: 0,
      showLogOutDialog: false,
      dialogPhone: '',
      form: {
        phone: '',
        password: '',
        identityTypes: ['autoCompany'],
        loginType: ''
      },
      formList: [
        { attr: 'phone', placeholder: '手机号', type: 'digit', maxLength: 11, must: true, test: 'mobile', password: false },
        { attr: 'password', placeholder: '密码', type: 'text', maxLength: 30, must: true, password: true }
      ]
    }
  },
  computed: {
    ...mapGetters({
      oauth: 'oauth'
    })
  },
  methods: {
    async bindLogin() {
      if (formVerify(this.form, this.formList)) {
        this.form.loginType = this.oauth
        const user = encryption({
          data: this.form,
          key: '1234567887654321',
          param: ['password']
        })
        const res = await this.login.login('/auth/login/v2/password/token', user)
        if (res && res.length) {
          this.showLogOut(res)
        }
      }
    },
    showLogOut(e) {
      this.dialogPhone = e
      this.showLogOutDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
@import "../login";
</style>
